<#include "common/header2.ftl" />
</head>
<body data-type="generalComponents">
    <#include "common/page_top2.ftl" />
    <div class="tpl-page-container tpl-page-header-fixed">
    <#include "common/menu.ftl" />
    <div class="tpl-content-wrapper">
        <div class="tpl-content-page-title">
            Amaze UI 文字列表
        </div>
        <ol class="am-breadcrumb">
            <li><a href="#" class="am-icon-home">首页</a></li>
            <li><a href="#">内容管理</a></li>
            <li class="am-active">文章列表</li>
        </ol>
        <div class="tpl-portlet-components">
            <div class="portlet-title">
                <div class="caption font-green bold">
                    <span class="am-icon-code"></span> 列表
                </div>
                <div class="tpl-portlet-input tpl-fz-ml">
                    <div class="portlet-input input-small input-inline">
                        <div class="input-icon right">
                            <i class="am-icon-search"></i>
                            <input type="text" class="form-control form-control-solid" placeholder="搜索..."> </div>
                    </div>
                </div>


            </div>
            <div class="tpl-block">
                <div class="am-g">
                    <div class="am-u-sm-12 am-u-md-6">
                        <div class="am-btn-toolbar">
                            <div class="am-btn-group am-btn-group-xs">
                                <a href="/admin/art/add" class="am-btn am-btn-default am-btn-success"><span class="am-icon-plus"></span> 新增</a>
                                <button type="button" class="am-btn am-btn-default am-btn-secondary"><span class="am-icon-save"></span> 保存</button>
                                <button type="button" class="am-btn am-btn-default am-btn-warning"><span class="am-icon-archive"></span> 审核</button>
                                <button type="button" class="am-btn am-btn-default am-btn-danger"><span class="am-icon-trash-o"></span> 删除</button>
                            </div>
                        </div>
                    </div>
                    <div class="am-u-sm-12 am-u-md-3">
                        <div class="am-form-group">
                            <select data-am-selected="{btnSize: 'sm'}">
                                <option value="option1">所有类别</option>
                                <option value="option2">IT业界</option>
                                <option value="option3">数码产品</option>
                                <option value="option3">笔记本电脑</option>
                                <option value="option3">平板电脑</option>
                                <option value="option3">只能手机</option>
                                <option value="option3">超极本</option>
                            </select>
                        </div>
                    </div>
                    <div class="am-u-sm-12 am-u-md-3">
                        <div class="am-input-group am-input-group-sm">
                            <input type="text" class="am-form-field">
                            <span class="am-input-group-btn">
                                <button class="am-btn  am-btn-default am-btn-success tpl-am-btn-success am-icon-search" type="button"></button>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="am-g">
                    <div class="tpl-table-images">
                        <#list pager.list as art >
                            <div class="am-u-sm-12 am-u-md-6 am-u-lg-4">
                                <div class="tpl-table-images-content">
                                    <div class="tpl-table-images-content-i-time">发布时间：${art.createTime?date}</div>
                                    <div class="tpl-i-title">
                                        ${art.title}
                                    </div>
                                    <a href="javascript:;" class="tpl-table-images-content-i">
                                        <div class="tpl-table-images-content-i-info">
                                            <span class="ico">
                                                <img src="/resource/assets/img/user02.png" alt="">追逐
                                            </span>
                                        </div>
                                        <span class="tpl-table-images-content-i-shadow"></span>
                                        <#if art.thumb?? && art.thumb !="" >
                                            <img src="${art.thumb}" alt="">
                                            <#else >
                                                <img src="/resource/assets/img/a1.png" alt="">
                                        </#if>
                                    </a>
                                    <div class="tpl-table-images-content-block">
                                        <div class="tpl-i-font">
                                             ${art.introduction}
                                        </div>
                                        <div class="tpl-i-more">
                                            <ul>
                                                <li><span class="am-icon-qq am-text-warning"> 100+</span></li>
                                                <li><span class="am-icon-weixin am-text-success"> 235+</span></li>
                                                <li><span class="am-icon-github font-green"> 600+</span></li>
                                            </ul>
                                        </div>
                                        <div class="am-btn-toolbar">
                                            <div class="am-btn-group am-btn-group-xs tpl-edit-content-btn">
                                                <button type="button" class="am-btn am-btn-default am-btn-success"><span class="am-icon-eye"></span> 查看</button>
                                                <button onclick="edit('${art.id}')" class="am-btn am-btn-default am-btn-secondary"><span class="am-icon-edit"></span> 编辑</button>
                                                <button status="${art.status}" onclick="state($(this),'${art.id}')" type="button" class="am-btn am-btn-default am-btn-warning <#if art.status == 0 >am-enactive</#if> ">
                                                    <#if art.status == 1 >
                                                        <span class="am-icon-archive"></span> 禁用
                                                        <#else >
                                                        <span class="am-icon-archive"></span> 开启
                                                    </#if>

                                                </button>
                                                <button onclick="deleteArt('${art.id}')" type="button" class="am-btn am-btn-default am-btn-danger"><span class="am-icon-trash-o"></span> 删除</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </#list>

                        <div class="am-u-lg-12">
                            <div class="am-cf">

                                <div class="am-fr">
                                    <ul class="am-pagination tpl-pagination">
                                        <li class="am-disabled"><a href="#">«</a></li>
                                        <li class="am-active"><a href="#">1</a></li>
                                        <li><a href="#">2</a></li>
                                        <li><a href="#">3</a></li>
                                        <li><a href="#">4</a></li>
                                        <li><a href="#">5</a></li>
                                        <li><a href="#">»</a></li>
                                    </ul>
                                </div>
                            </div>
                            <hr>
                        </div>
                    </div>

                </div>
            </div>
            <div class="tpl-alert"></div>
        </div>
    </div>
</div>
</body>
<style>
    .am-btn-toolbar .am-btn-group .am-enactive{
        /*background:"#ea6e0c",border:"solid 1px #ea6e0c"*/
        background:#8E44AD;
        border:solid 1px #8E44AD;
    }
</style>
<script src="/resource/assets/js/jquery.min.js"></script>
<script src="/resource/assets/js/amazeui.min.js"></script>
<script src="/resource/assets/js/app.js"></script>
<script>

    function edit(id) {
        location.href = "/admin/art/edit?id="+id;
    }

    function state(obj,id) {
        var prievState =  obj.attr('status');

        $.ajax({
            "type":"post",
            "url":"/admin/art/state",
            data:{
                id:id,
                state:prievState==1?0:1
            },
            dataType:'json',
            success:function (data) {
                if(data.code == 1){
                    if(prievState==1){
                        obj.html('<span class="am-icon-archive"></span> 开启').addClass("am-enactive");
                        obj.attr('status',0);
                    }else{
                        obj.attr('status',1);
                        obj.html('<span class="am-icon-archive"></span> 禁用').removeClass("am-enactive");
                    }
                }
            }
        })

    }

    function deleteArt(id) {
       if(confirm("确定要删除吗?")){
           location.href="/admin/art/delete?id="+id;
       }
    }
</script>
</html>